                                                <!-- 标题组件 -->

<!-- 可传递属性 -->
<!-- ifOpenBtn：判断是否开起右边按键  默认不开false
         title：标题文字
		 titleSize:文字大小
         tabText：跳转按键文字
         pvuvName：pvuv 埋点信息 （父组件的名称） -->
<!-- 需配套的函数 -->
<!-- headTitleBtn：使用父元素函数，传递  title 标题文字   pvuvName pvuv 埋点信息 （父组件的名称） -->

<template>
  <div class="headTitle" :style="{fontSize:''+ titleSize +''}">
    <!-- 标题文字 -->
    {{ title }}

    <!-- 标题右边按键 -->
    <div class="headTitle-btn" v-if="ifOpenBtn" @click="headTitle">
      <!-- 右边按键文字 -->
      {{ tabText }}
      <!-- 按键符号 -->
      <div class="headTitle-btn-icon">〉</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 功能传递部分
    // -------------------------------------------------------------------------------------------
    // 判断是否开起右边按键  默认不开false
    ifOpenBtn: {
      type: [Boolean],
      default: false,
    },

    //   信息传递部分
    // -------------------------------------------------------------------------------------------
    //   标题文字
    title: {
      type: [String],
      default: "",
    },

    //   跳转按键文字
    tabText: {
      type: [String],
      default: "",
    },
	// 文字大小
	titleSize:{
		type: [String],
		default: "30rpx",
	},
    // pvuv 埋点信息 （父组件的名称）
    pvuvName: {
      type: [String],
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 按键点击函数
    headTitle() {
      // 使用父元素函数，传递  title 标题文字   pvuvName pvuv 埋点信息 （父组件的名称）
      this.$emit("headTitleBtn", {
        pvuvName: this.pvuvName,
        title: this.title,
      });
    },
  },
};
</script>

<style>
/* 标题外部 */
.headTitle {
  width: 690rpx;
  height: 98rpx;
  margin: auto;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 600;
  text-align: justify;
  color: #333333;
  line-height: 98rpx;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  position: relative;
  align-items: center;
}

/* 右边按键部分 */
.headTitle-btn {
  display: flex;
  position: absolute;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  top: 0;
  right: 0;
}

/* 符号图标 */
.headTitle-btn-icon {
  padding: 0 0 0 10px;
  text-align: right;
}
</style>
